在 Styled Mode 內有提及 Dark Mode 的說明，主要使用 darkModeSelector 屬性進行深色模式設定，若要進行深色模式的切換，須定義一個 CSS 類別選擇器(.dark)，在 document root 上切換此樣式，以達到深色模式的切換渲染。

此篇介紹如何設定 Dark Mode，並且使用 toggleSwitch 切換深淺色模式。

設定 Dark Mode

以下因為是使用 tailwindCSS，搭配其預設深色模式定義，先在 tailwind.config.js 內設定，再到 main.js 內設定 darkModeSelector 屬性為 .dark。

// tailwind.config.js
module.exports = {
  darkMode: 'selector',
  // ...
}

// main.js
import PrimeVue from 'primevue/config';
import Aura from '@primevue/themes/aura';

const app = createApp(App);

app.use(PrimeVue, {
    theme: {
        preset: Aura,
        options: {
            darkModeSelector: '.dark',
        }
    }
 });

若想要自行設定 CSS 名稱，可改以下設定：

// tailwind.config.js
module.exports = {
  darkMode: ['selector', '[data-mode="my-dark-style"]'],
  // ...
}

// main.js
import PrimeVue from 'primevue/config';
import Aura from '@primevue/themes/aura';

const app = createApp(App);

app.use(PrimeVue, {
    theme: {
        preset: Aura,
        options: {
            darkModeSelector: '.my-dark-style',
        }
    }
 });

切換 Dark Mode

tailwindCSS 在深色模式上根據文件說明切換 .dark 可渲染 dark:xxx 樣式，或使用 primeVue 主題的深色設定。

在頁面上使用 toggleSwitch 切換深色模式：

 // HomeView.vue
<script>
const checked = ref(false)
const toggleColorScheme = () => {
const element = document.querySelector('html')
element.classList.toggle('dark'); // 或為自行定義的 CSS
</script>

<template>
	 <ToggleSwitch v-model="checked" @update:modelValue="toggleColorScheme()" class="mb-3" />
	 ....
</template>

參考連結：

1. https://primevue.org/theming/styled/#darkmode
2. https://tailwindcss.com/docs/dark-mode#toggling-dark-mode-manually